<template>
	<view>
		<u-navbar
			title="巡地"
			:autoBack="true"
			placeholder
		>
		</u-navbar>
		<scroll-view :scroll-y="true" :style="{height: scrollViewHeight}">
			<view style="height: 16rpx;"/>
			<view class="foster-detail-content1">
				<view class="foster-detail-content1-title">巡地信息</view>
				<u-row>
					<u-col span="6">
						<view class="cell-class u-border-top1 u-border-left u-border-bottom u-border-right">
							<text class="cell-title">地块名称:</text>
							<text class="cell-content">{{detail.landId_dictText}}</text>
						</view>
					</u-col>
					<u-col span="6">
						<view class="cell-class u-border-top1 u-border-bottom u-border-right">
							<text class="cell-title">地块面积:</text>
							<text class="cell-content">{{detail.landInfo && detail.landInfo.area}}{{detail.landInfo && detail.landInfo.areaUnit}}</text>
						</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="6">
						<view class="cell-class u-border-left u-border-bottom u-border-right">
							<text class="cell-title">种植品种:</text>
							<text class="cell-content">{{detail.cropId_dictText}}</text>
						</view>
					</u-col>
					<u-col span="6">
						<view class="cell-class u-border-bottom u-border-right">
							<text class="cell-title">管理人员:</text>
							<text class="cell-content">{{detail.manageId_dictText}}</text>
						</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="6">
						<view class="cell-class u-border-left u-border-bottom u-border-right">
							<text class="cell-title">农事类型:</text>
							<text class="cell-content">{{detail.operation_dictText}}</text>
						</view>
					</u-col>
					<u-col span="6">
						<view class="cell-class u-border-bottom u-border-right">
							<text class="cell-title">计划时间:</text>
							<text class="cell-content">{{detail.planTime}}</text>
						</view>
					</u-col>
				</u-row>
			</view>
			<view style="height: 16rpx;"/>
			<u--form labelPosition="left" :model="model" ref="form1">
				<view style="padding: 0 32rpx;background-color: #fff;">
					<u-form-item @click="openShow('showStart')" labelWidth="80" label="开始时间" borderBottom ref="startTime">
						<u--input disabled disabledColor="#ffffff" placeholder="请选择开始时间" v-model="model.refund.startTime" border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item @click="openShow('showEnd')" labelWidth="80" label="结束时间" borderBottom ref="endTime">
						<u--input disabled disabledColor="#ffffff" placeholder="请选择结束时间" v-model="model.refund.endTime" border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<view style="color: #303133;font-size: 15px;padding-top: 10px;">巡地描述</view>
					<u-form-item class="cus-form-item" borderBottom labelWidth="0">
						<u--textarea height="50px" count :maxlength="50" v-model="model.refund.remark" placeholder="请输入备注" border="none"></u--textarea>
					</u-form-item>
					<u-form-item labelWidth="160" label="巡地照片,最多3张" ref="img">
					</u-form-item>
					<u-upload
							uploadText="巡地照片"
							:fileList="fileList1"
							@afterRead="afterRead"
							@delete="deletePic"
							name="1"
							multiple
							:maxCount="3"
						></u-upload>
					<u-form-item labelWidth="160" label="巡地视频,最多3个" ref="video">
					</u-form-item>
					<u-upload
							uploadText="巡地视频"
							accept="video"
							:fileList="fileList2"
							@afterRead="afterRead1"
							@delete="deletePic1"
							name="2"
							multiple
							:maxCount="3"
						></u-upload>
				</view>
			</u--form>
		</scroll-view>
		<view class="good-detail-bootom">
			<view style="margin: 0 32rpx;height: 100%;width: calc(100vw - 64rpx);display: flex;align-items: center;justify-content: space-between;">
				<view class="good-detail-bootom-r">
					<u-button @click="submit" :color="appColor" text="提交工单" shape="circle"></u-button>
				</view>
			</view>	
		</view>
		<u-datetime-picker
				:show="show"
				@cancel="show = false"
				v-model="model.refund.startTime"
				mode="datetime"
				@confirm="formatTime($event, 'showStart')"
				:confirmColor="appColor"
				:maxDate="maxDate"
		></u-datetime-picker>
		<u-datetime-picker
				:show="show1"
				@cancel="show1 = false"
				v-model="model.refund.endTime"
				mode="datetime"
				@confirm="formatTime($event, 'showEnd')"
				:confirmColor="appColor"
				:maxDate="maxDate"
		></u-datetime-picker>
	</view>
</template>

<script>
	import {mapState, mapActions} from 'vuex';
	import {getToken} from '@/utils/auth.js';
	import {base_url} from '@/utils/request.js';
	import {landSubmit} from '@/api/home.js';
	import {getDictItems} from '@/api/me.js';
	export default {
		data() {
			return {
				showOperation: false,
				show: false,
				show1: false,
				model: {
					refund: {
						remark: '',
						operation: '',
						startTime: '',
						endTime: ''
					},
				},
				fileList1: [],
				fileList2: [],
				maxDate: Date.now()
			}
		},
		computed: {
			...mapState(['appInfo', 'detail']),
			appColor() {
				return this.appPrimaryColor || '#f40215'
			},
			scrollViewHeight() {
				return this.scrollHeight - 44 - 50 + 'px';
			},
		},
		onLoad() {
			this.model.refund.operation = this.detail.operation
		},
		methods: {
			async formatTime(e, type) {
				if(type === 'showStart') {
					this.model.refund.startTime = await uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM');
					this.show = false;
				} else {
					this.model.refund.endTime = await uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM');
					this.show1 = false;
				}
			},
			openShow(type) {
				let time = Date.now();
				if(type === 'showStart') {
					this.show = true;
				} else {
					this.show1 = true;
				}
			},
			refundOperationSelect(e) {
				this.model.refund.operation = e.name;
			},
			// 提交
			submit() {
				let {remark, operation, startTime, endTime} = this.model.refund;
				remark = uni.$u.trim(remark);
				if(!operation) {
					return this.$cuTip('请选择巡地类型');
				}
				if(!startTime) {
					return this.$cuTip('请选择开始时间');
				}
				if(!endTime) {
					return this.$cuTip('请选择结束时间');
				}
				if(!remark) {
					return this.$cuTip('请输入巡地描述');
				}
				if(this.fileList1.length === 0) {
					return this.$cuTip('请上传巡地照片');
				}
				if(this.fileList2.length === 0) {
					return this.$cuTip('请上传巡地视频');
				}
				let imgList = [];
				let videoList = [];
				this.fileList1.forEach(item => {
					imgList.push(item.url)
				})
				this.fileList2.forEach(item => {
					videoList.push(item.url)
				})
				let postObj = {
					id: this.detail.id,
					remark,
					image: imgList.join(','),
					video: videoList.join(','),
					operation,
					startTime,
					endTime
				};
				this.$cuLoading().then(() => {
					landSubmit(postObj).then(res => {
						uni.hideLoading();
						const {code} = res;
						if(code === 200) {
							this.$cuTip('提交成功').then(() => {
								uni.navigateBack({
									delta: 1
								})
							});
						} else {
							
						}
					}).catch(() => {
						uni.hideLoading();
					})
				})
				console.log(postObj);
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			deletePic1(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			// 新增图片
			async afterRead1(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: base_url + '/jeecg-boot/sys/common/upload', // 仅为示例，非真实的接口地址
						header: {
							'content-type': 'application/json',
							'Login-Type': 'MEMBER',
							'X-Access-Token': getToken(),
						},
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(JSON.parse(res.data).message)
							}, 1000)
						}
					});
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
	.u-textarea {
		padding: 9px 0!important;
	}
</style>

<style lang="scss" scoped>
	.shop-cart-box {
		background-color: #fff;
		padding: 32rpx;
		display: flex;
		align-items: center;
		.shop-cart-l {
			display: flex;
			align-items: center;
			width: 72rpx;
		}
		.shop-cart-r {
			flex: 1;
			display: flex;
			.shop-cart-r-1 {
				flex: 1;
				.shop-cart-r-1-title {
					line-height: 34rpx;
					font-size: 28rpx;
					color: #000;
					height: 68rpx;
				}
				.shop-cart-r-1-con {
					height: 48rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}
		}
	}
	
	.logistics-box {
		padding: 32rpx;
		background-color: #fff;
		.logistics-title {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			line-height: 28rpx;
			.logistics-title-l {
				color: #666;
				padding-right: 8rpx;
			}
			.logistics-title-r {
				color: #333;
			}
		}
	}
	
	
	.good-detail-bootom {
		background-color: #ffffff;
		position: fixed;
		height: 50px;
		width: 100vw;
		bottom: 0;
		left: 0;
		padding-bottom: constant(safe-area-inset-bottom);     /*兼容 iOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);  /*兼容 iOS>11.2*/
		box-sizing: content-box;
		.good-detail-bootom-l1 {
			display: flex;
			flex-direction: column;
			justify-content: center;
			.good-detail-bootom-l1-t {
				font-size: 28rpx;
				padding-bottom: 4rpx;
			}
			.good-detail-bootom-l1-b {
				.good-detail-bootom-l1-b-1 {
					display: flex;
					align-items: center;
					font-size: 24rpx;
				}
			}
		}
		.good-detail-bootom-r {
			flex: 1;
		}
	}
	
	.foster-detail-content1 {
		padding: 32rpx;
		background-color: #fff;
		.env-box {
			margin-top: 16rpx;
			display: flex;
			justify-content: space-between;
			.env-item {
				width: 160rpx;
				height: 192rpx;
				border-radius: 10rpx;
				padding: 16rpx 0;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				.env-status {
					width: 56rpx;
					height: 30rpx;
					box-shadow: 0px 2rpx 3rpx rgba(0, 0, 0, 0.16);
					border-radius: 10rpx 0px 0px 10rpx;
					font-size: 20rpx;
					color: #fff;
					line-height: 30rpx;
					text-align: center;
					position: absolute;
					right: 0;
					top: 0;
				}
				.env-num {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-size: 32rpx;
					color: rgba(42, 175, 96, 1);
					font-weight: bold;
					.env-unit {
						font-size: 24rpx;
						font-weight: normal;
					}
					
				}
			}
			.env-item1 {
				background: rgba(211, 238, 221, 1);
			}
			.env-item2 {
				background: rgba(241, 231, 206, 1);
				.env-num {
					color: rgba(249, 146, 8, 1)
				}
			}
			.env-item3 {
				background: rgba(254, 221, 218, 1); 
				.env-num {
					color: rgba(242, 74, 68, 1);
				}
			}
			.env-item4 {
				background: rgba(233, 246, 209, 1); 
				.env-num {
					color: rgba(96, 175, 42, 1);
				}
			}
		}
		.foster-detail-content1-title {
			font-size: 15px;
			line-height: 15px;
			color: #303133;
			margin-bottom: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
	
	.cell-class {
		line-height: 24rpx;
		padding: 16rpx 0 16rpx 16rpx;
		.cell-title {
			font-size: 24rpx;
			color: #666;
		}
		.cell-content {
			font-size: 24rpx;
			color: #000;
			padding-left: 8rpx;
		}
	}
</style>